<template>
    <span>
        <Button type="text" size="small" @click="handleAppEditShow(data)">编辑</Button>
        <Modal v-model="app_edit_modal" title="编辑应用" :mask-closable="false">
            <Form :model="app_current" :label-width="80">
                <FormItem label="应用ID">
                    <Input v-model="app_current.app_id" placeholder="请输入应用ID"></Input>
                    <p style="color:#aaa;">该值需在对应APP的设置中查看。应用ID必须唯一，长度为16，仅允许由大写字母、小写字母和数组组成</p>
                </FormItem>
                <FormItem label="应用名称">
                    <Input v-model="app_current.app_name" placeholder="请输入应用名称"></Input>
                </FormItem>
                <FormItem label="应用密钥">
                    <Input v-model="app_current.app_secret" placeholder="请输入应用密钥" type="password" password></Input>
                    <p style="color:#aaa;">该值需在对应APP的设置中查看。应用密钥必须唯一，长度为16，仅允许由大写字母、小写字母和数组组成</p>
                </FormItem>
            </Form>
            <template #footer>
                <Button type="primary" @click="handleAppEditOk">保存</Button>
                <Button type="text" @click="app_edit_modal = false">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
export default {
    name: "AppEditButton",
    props: {
        data: Object
    },
    data() {
        return {
            app_edit_modal: false,
            app_current: {
                app_id: '',
                app_name: '',
                app_secret: '',
                app_enable: false,
                app_checked: false
            },
        }
    },
    methods: {
        handleAppEditShow(row) {
            this.app_current.id = row.id;
            this.app_current.app_id = row.app_id;
            this.app_current.app_name = row.app_name;
            this.app_current.app_secret = row.app_secret;
            this.app_edit_modal = true;
        },
        handleAppEditOk() { 
            this.$http.post('/update_app', this.app_current).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('修改成功');
                    this.app_edit_modal = false;
                    this.$emit('success');
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
    }
}
</script>